/*容器的布局方式*/
.tcf-flex{
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
/*主轴为X方向*/
.tcf-drection-row{
	-webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
/*主轴为Y方向*/
.tcf-drection-column{
	 -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/*主轴为X方向，子元素从右到左显示*/
/*这里补充说明一点： box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。*/
.tcf-drection-right{
	-webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/*主轴为Y方向，子元素从下到上显示*/
.tcf-drection-bottom{
	 -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*子元素主轴居中对齐*/
.tcf-justify-center{
	-webkit-box-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
/*子元素主轴左对齐*/
.tcf-justify-start {
	-webkit-box-pack: start ;
	-moz-justify-content: start ;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
/*子元素主轴右对齐*/
.tcf-justify-end  {
	-webkit-box-pack: end  ;
	-moz-justify-content: flex-end  ;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
/*子元素主轴左右对齐（旧版没有space-around）*/
.tcf-justify-justify{
	-webkit-box-pack: justify  ;
	-moz-justify-content: justify  ;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

/*子元素交叉轴居中对齐*/
.tcf-align-items-center{
	-webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

/*子元素交叉轴左对齐*/
.tcf-align-items-start{
	-webkit-box-align: start ;
    -moz-align-items: start ;
    -webkit-align-items: flex-start ;
    align-items: flex-start ;
}

/*子元素交叉轴右对齐*/
.tcf-align-items-end{
	-webkit-box-align: end ;
    -moz-align-items: end ;
    -webkit-align-items: flex-end ;
    align-items: flex-end ;
}

/*子元素交叉轴文本基线对齐*/
.tcf-align-items-baseline {
	-webkit-box-align: baseline  ;
    -moz-align-items: baseline  ;
    -webkit-align-items: baseline  ;
    align-items: baseline;
}

/*子元素交叉轴上下对齐并铺满*/
.tcf-align-items-stretch {
	-webkit-box-align: stretch  ;
    -moz-align-items: stretch  ;
    -webkit-align-items: stretch  ;
    align-items: stretch;
}


/*子元素伸缩比为1*/
.tcf-items{
	 -webkit-box-flex: 1.0;
	 -moz-flex: auto;
	 -webkit-flex: auto;
	  flex: auto;
}
.tcf-items1{
	 -webkit-box-flex: 0.6;
	 -moz-flex: 0.6;
	 -webkit-flex: 0.6;
	  flex: 0.6;
}
.tcf-items2{
	 -webkit-box-flex: 0.46;
	 -moz-flex: 0.46;
	 -webkit-flex: 0.46;
	  flex: 0.46;
}

/*子元素显示顺序*/
.tcf-order{
	 -webkit-box-ordinal-group: 1;
	 -moz-order: 1;
	 -webkit-order: 1;
	 order: 1;
}
/*子元素显示顺序*/
.tcf-order-previous{
	 -webkit-box-ordinal-group: 0;
	 -moz-order: 0;
	 -webkit-order: 0;
	 order: 0;
}
	
	
	
